<template>
  <div class="box">
    <div class="title">本月报警统计</div>
    <div class="box-card">
      <div class="card-1">
        <div class="chart" ref="chart"></div>
      </div>
      <!-- <div class="card-2"></div> -->
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  components: {},
  methods: {
    initChart() {
      let myChart = echarts.init(this.$refs.chart);
      const labelOption = {
        show: true,
        color: "#fff",
        position: "top",
        fontSize: 14,
        rich: {
          name: {},
        },
      };
      const options = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          data: ["主机", "发电机", "侧推"],
          textStyle: {
            color: "#fff",
          },
          top: "0",
        },
        grid: {
          left: "0%",
          right: "0%",
          top: "50px",
          bottom: "25px",
        },
        xAxis: [
          {
            type: "category",
            axisTick: { show: false },
            data: ["船舶1", "船舶2"],
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        yAxis: [
          {
            show: false,
            type: "value",
            axisLabel: {
              color: "#fff",
            },
          },
        ],
        series: [
          {
            name: "主机",
            type: "bar",
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [320, 332],
          },
          {
            name: "发电机",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [220, 182],
          },
          {
            name: "侧推",
            type: "bar",
            label: labelOption,
            emphasis: {
              focus: "series",
            },
            data: [52, 24],
          },
        ],
      };
      myChart.setOption(options);
    },
  },
  mounted() {
    const netData = [3, 5];
    this.initChart(netData);
  },
};
</script>

<style scoped lang="scss">
.box {
  background-image: url("/img/screen/card.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  padding: 15px;
  .title {
    height: 30px;
    color: #fff;
    font-size: 16px;
  }
  .box-card {
    height: calc(100% - 30px);
    display: flex;
    > div {
      width: 100%;
      height: 100%;
    }
    .chart {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
